<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <script src="../script/jquery-1.10.min.js"></script>
    <script>
        var d = Date();
        function displayDate() {
            document.getElementById("demo").innerHTML=d;

        };
        $(document).ready(function() {
            $("#jquery").click(function(){  //点击事件
                $("#demo").html(d)
            });
        })
    </script>
</head>
<body>
<p id="demo" style="font-size:1.5em">点击按钮显示 date() change</p>
<script>
        document.write("<p style='font-size: 2em'> document.wirte 方法 不要放在head，会覆盖整个文档</p>");
</script>
<button class="btn btn-danger" onclick="displayDate()">js方式 显示时间</button>
<p style="margin: 2em"></p>
<button  id="jquery" class="btn btn-default">jquery方式 显示时间</button>

<div class="container">
    <div class="row">
    <div class="col-md-6 col-md-offset-2">
        <p style="color: red;font-size: 2em"> js if else 开关灯</p>
    </div>
</div>
    <div class="row">
    <div class="col-md-6 col-md-offset-2">
        <div><img id="myimg" onclick="changeimg()" src="img/pic_bulboff.gif"></div>
    </div>
</div>
    <p class="page-header"></p>
    <div class="row">
    <div class="col-md-6 col-md-offset-2">
        <div>
            <p style="font-size: 1em;color: red;font-weight: bold" onclick="changestyle(this)">change style</p>
        </div>
    </div>
</div>
</div>
<script>
    function changestyle(obj) {
//        obj.style.color = "blue"
//        obj.style.fontSize="2em"
        //jquery
        obj = $(obj)
        obj.css({"color":"blue","font-size":"2em"})

    }
   function changeimg() {
//       element=document.getElementById("myimg");
//       if (element.src.match("bulbon"))
//       {
//           element.src="img/pic_bulboff.gif"
//       }
//       else
//       {
//           element.src="img/pic_bulbon.gif"
//       }
       // 三目运算 与上面 IF ELSE 效果一样
//       element.src=element.src.match("bulboff")?"img/pic_bulbon.gif":"img/pic_bulboff.gif"

       //jquery
       element = $("#myimg")
       console.log(element.attr("src"))
       var newarry = ["img/pic_bulbon.gif"]
       if ($.inArray(element.attr("src"),newarry))
       {

           element.attr("src","img/pic_bulbon.gif")
       }
       else
       {
           element.attr("src","img/pic_bulboff.gif")
       }

   }

</script>
</body>
</html>